<template>
  <el-card>
    <!-- 男方 -->
    <div class="mb5">男方（发布人）：</div>
    <el-table :data="menList" style="width: 100%" border>
      <el-table-column prop="name" label="用户ID" align="center" />
      <el-table-column prop="nickName" label="昵称" align="center" width="80px" />
      <el-table-column prop="addTime" label="报名时间" align="center" :formatter="dateFormatter" />
      <el-table-column prop="status" label="报名状态" align="center">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ENROLL_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="缴费金额" align="center" width="90px">
        <template #default="scope"> ￥{{ scope.row.price }} </template>
      </el-table-column>
      <el-table-column
        prop="paymentTime"
        label="缴费时间"
        align="center"
        :formatter="dateFormatter"
      />
      <el-table-column prop="paymentWay" label="支付方式" align="center" width="90px" />
      <el-table-column prop="paymentOrder" label="支付单号" align="center" width="140px" />
      <el-table-column prop="writeOffCode" label="核销码" align="center">
        <template #default="scoped">
          <el-popover
            :width="600"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          >
            <template #reference>
              <span class="color-blue">查看</span>
            </template>
            <template #default>
              {{ scoped.row }}
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="核销状态" align="center">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.WRITEOFF" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        prop="writeOffTime"
        label="核销时间"
        align="center"
        :formatter="dateFormatter"
      />
    </el-table>

    <!-- 女方 -->
    <div class="mb5 mt5">女方（参与人）：</div>
    <el-table :data="womenList" style="width: 100%" border>
      <el-table-column prop="name" label="用户ID" align="center" />
      <el-table-column prop="nickName" label="昵称" align="center" width="80px" />
      <el-table-column prop="addTime" label="报名时间" align="center" :formatter="dateFormatter" />
      <el-table-column prop="status" label="报名状态" align="center">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ENROLL_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <template v-if="data.costShare == 1">
        <el-table-column prop="price" label="缴费金额" align="center" width="90px">
          <template #default="scope"> ￥{{ scope.row.price }} </template>
        </el-table-column>
        <el-table-column
          prop="paymentTime"
          label="缴费时间"
          align="center"
          :formatter="dateFormatter"
        />
        <el-table-column prop="paymentWay" label="支付方式" align="center" width="90px" />
        <el-table-column prop="paymentOrder" label="支付单号" align="center" width="140px" />
        <el-table-column prop="writeOffCode" label="核销码" align="center">
          <template #default="scoped">
            <el-popover
              :width="600"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
              <template #reference>
                <span class="color-blue">查看</span>
              </template>
              <template #default>
                {{ scoped.row }}
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="核销状态" align="center">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.WRITEOFF" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column
          prop="writeOffTime"
          label="核销时间"
          align="center"
          :formatter="dateFormatter"
        />
      </template>
    </el-table>
  </el-card>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import * as ActivityInfoApi from '@/api/blind/activityInfo'

const { data } = defineProps<{ data }>()
const menList = ref([]) // 男方列表
const womenList = ref([]) // 女方列表

onMounted(async () => {
  const fetchDate = await ActivityInfoApi.getActivityEnrollList({
    activityId: data.id,
    activeSource: data.activeSource
  })
  menList.value = fetchDate.menList
  womenList.value = fetchDate.womenList
})
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
